<template>
	<view class="feelback">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 feelback-wrap">
			<u-list @scrolltolower="scrolltolower" height="1168rpx">
				<u-list-item class="mb-3  fb-item" v-for="(item,index) in feelbackList" :key="index">
					<view class="flex justify-between pt-2 pr-2 pl-2 mb-1 header">
						<view class="fb-time">{{item.CreateDate}}</view>
						<view :class="item.IsReply ?'replied' : 'reply' ">{{item.IsReply ? '已回复' : '待回复'}}</view>
					</view>
					<view class="mb-1 pr-2 pl-2 fb-content">{{item.Comments}}</view>
					<u-album class="pr-2 pl-2" :urls="item.CallPhotos" @albumWidth="width => albumWidth = width" multipleSize="70">
					</u-album>
					<view class="mt-2 mb-1 pr-2 pl-2 reply-time">回复时间 {{item.ReplyDate}}</view>
					<view class="mb-1 pr-2 pl-2 reply-content">{{item.Reply}}</view>
					<view class="flex justify-end p-2 opt">
						<u-button @click="handleModalConfirm(item)" size="mini" text="删除"></u-button>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-modal :show="showConfirm" @confirm="handleDelFeelback" @cancel="showConfirm = false" :showCancelButton="true"
			title="删除反馈" content='确定删除该反馈？'></u-modal>
	</view>
</template>

<script>
	import {
		fetchFeelbackList,
		delFeelback
	} from "@/apis/user.js";
	import {
		getTotalPageNum
	} from "@/util";
	export default {
		data() {
			return {
				feelbackList: [],
				showConfirm: false,
				currItem: null,
			};
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				const res = await fetchFeelbackList({
					PageNo: 1,
					PageSize: 9999,
				})
				if (res.MsgCode != 0) return
				console.log('fetchData', res)
				this.feelbackList = res.data.FeelbackList.map(item => {
					item.CallPhotos = item.CallPhotos.map(cItem => {
						return 'http://img.help10000.com' + cItem
					})
					return item
				})

			},
			handleModalConfirm(item){
				this.currItem = item
				this.showConfirm = true
			},
			async handleDelFeelback() {
				const currItem = this.currItem
				if (!currItem) return;
				console.log('handleDelFeelback', currItem)
				const accountInfo = uni.getStorageSync('accountInfo') || {}
				const res = await delFeelback({
					OrderCmpyCode: accountInfo.currCmpy ? accountInfo.currCmpy.CmpyCode : '',
					FeelbackID: currItem.FeelbackID,
				})
				console.log('handleDelFeelback', res)
				if (res.MsgCode != 0) return
				this.showConfirm = false
				uni.showToast({
					title: '删除成功！',
					duration: 500,
					icon: 'success'
				});
				setTimeout(this.fetchData, 500)
			},
			scrolltolower() {

			},
			onNavigationBarButtonTap(e) {
				uni.navigateTo({
					url: '/pages/my/feelback/addFeelback'
				})
			},
		}
	}
</script>

<style lang="scss">
	.feelback {
		.top-bg {
			width: 100%;
			height: 120rpx;
			background-color: #007aff;
			z-index: -1;
		}

		.feelback-wrap {
			margin-top: -72rpx;

			.fb-item {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				font-size: 24rpx;

				.header {
					.fb-time {
						color: #666;
					}

					.reply {
						color: #e2665d;
					}

					.replied {
						color: #5cc981;
					}
				}

				.fb-content {
					color: #333;
					font-size: 28rpx;
				}
				.reply-time{
					color: #f2944c;
				}
				.reply-content {
					font-size: 28rpx;
					color: $s-text-color-brand;
					
				}
				.opt{
					background-color: #f6faff;
					border-bottom-left-radius:  $s-border-radius;
					border-bottom-right-radius:  $s-border-radius;
					
					::v-deep .u-button--mini {
						width: 100rpx;
						background-color: #fff;
						box-shadow: $s-bg-shadow;
						// border-radius: $s-border-radius;
						font-size: 24rpx;
						margin: 0;
						color: $s-text-color-brand
					}
				}
				
			}
		}
	}
</style>
